<template>
	<div>
		<div class="input-box">
			<van-form validate-first @failed="onFailed" style="display: flex;flex-direction: column;align-items: center;">
				<!-- 通过 pattern 进行正则校验 -->
				<van-field
				style="margin: 20px 0px"
				label="账号" 
					v-model="value1"
					
					name="pattern"
					placeholder="请输入账号"
					:rules="[{ pattern, message: '请输入正确内容' }]"
				/>
				<!-- 通过 validator 进行函数校验 -->
				<van-field
					style="margin: 20px 0px"
					label="密码" 
					v-model="value2"
					name="validator"
					placeholder="请输入密码"
					:rules="[{ validator, message: '请输入正确内容' }]"
				/>
				<!-- 通过 validator 进行异步函数校验 -->
				<van-field
				style="margin: 20px 0px"
				label="二次密码" 
					v-model="value3"
					name="asyncValidator"
					placeholder="请输入二次密码"
					:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
				/>
				<van-field style="margin: 20px 0px" v-model="value4" label="昵称" placeholder="请输昵称"
				:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" />
				<van-field style="margin: 20px 0px" v-model="value5" label="手机号码" placeholder="请输入手机号码"
				:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" />
				<!-- <van-button style="margin: 10px 0; width: 100px;" type="info">人机验证</van-button> -->

				<div style="width: 100%; margin: 20px 16px;">
					<van-button style="width: 100%;" round block type="info" native-type="submit">提交</van-button>
				</div>
			</van-form>
		</div>
		<div class="btn-box">
      <span @click="toLogin">前往登录</span>
      <span is-link @click="showPopup">人脸识别</span>
      <van-popup v-model="show">正在进行人脸识别</van-popup>
      <!-- <span is-link @click="showPopup2">更多选项</span>
      <van-popup class="van-cell-box" v-model="show2" position="bottom" :style="{ height: '20%' }">
        <van-cell title="找回密码" value=">" />
        <van-cell title="问题反馈" value=">" />
      </van-popup> -->
    </div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2PhoneRegister',

	data() {
		return {
			value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      pattern: /\d{6}/,
      show: false,

		};
	},

	mounted() {
		
	},

	methods: {
		  // 校验函数返回 true 表示校验通过，false 表示不通过
			validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
		toLogin(){
      this.$router.push('/phoneLogin')
    },
		showPopup() {
      this.show = true;
    },
	},
};
</script>

<style lang="less" scoped>
.input-box{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	// height: 500px;
	// background: cornflowerblue;
	margin-top: 100px;
}
.btn-box{
  width: 100%;
  height: 100px;
  background: white;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>